{% extends 'PHPDishWebBundle::layout.html.twig' %}

{% block title %} {{ topic.title }} {% endblock %}

{% block script %}
    <script type="text/javascript" src="{{ asset('build/js/topic.js') }}"></script>
    <script type="text/javascript">
        window.topicId = {{ topic.id }};
    </script>
{% endblock %}

{% block content %}
    <div class="container" role="main">
        <div class="row">
            <div class="col-md-9">
                <div class="panel panel-u topic-view">
                    <div class="panel-heading clearfix">
                        <div class="author">
                            <a href="{{ path('user_view', {'username': topic.user.username}) }}"><img src="{{ asset(topic.user.avatar)|default('user.jpg')|imagine_filter('middle_square') }}" class="avatar"/></a>
                        </div>
                        <h3 class="title">
                            {{ topic.title }}
                            {% if topic.recommended or topic.isTop %}<i class="if i-badge" title="{{ 'ui.good_topic'|trans }}"></i>{% endif %}
                        </h3>
                        <div class="meta">
                            <ul class="list-unstyled list-inline">
                                <li><i class="if i-calendar"></i> {{ topic.createdAt|time_diff }}</li>
                                <li><i class="if i-user"></i> {{ topic.user.username }}</li>
                                <li><i class="if i-comment"></i> <a href="#reply-list"  data-action="go-reply">{{ replies|length }} {{ 'ui.reply'|trans }}</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="panel-body">
                        <article class="markdown-body body">{{ topic.body|image_process|raw }}</article>
                    </div>
                    <div class="panel-footer clearfix">
                        <div class="clearfix">
                            <ul class="list-inline list-unstyled action" data-role="topic-action">
                                <li class="vote">
                                    {% if is_granted('IS_AUTHENTICATED_REMEMBERED') and topic.isVotedBy(app.user)  %}
                                        <a href="javascript:void(0)" data-action="vote" title="{{ 'ui.cancel_vote'|trans }}" data-voted="true">
                                            <i class="fa fa-thumbs-up"></i> <span class="number {% if topic.voteCount == 0 %}hidden{% endif %}">{{ topic.voteCount }}</span>
                                        </a>
                                    {% else %}
                                        <a href="javascript:void(0)" data-action="vote" title="{{ 'ui.vote'|trans }}">
                                            <i class="fa fa-thumbs-o-up"></i> <span class="number {% if topic.voteCount == 0 %}hidden{% endif %}">{{ topic.voteCount }}</span>
                                        </a>
                                    {% endif %}
                                </li>

                                {% if is_granted('edit', topic) %}
                                <li><a href="javascript:void(0)" data-action="remove" title="{{ 'ui.remove'|trans }}"><i class="if i-trash"></i></a></li>
                                <li><a href="{{ path('topic_edit', {id: topic.id}) }}" title="{{ 'ui.edit'|trans }}"><i class="if i-edit"></i></a></li>
                                {% endif %}

                                {% if is_granted('ROLE_ADMIN', topic) %}
                                    <li><a href="javascript:void(0)" {% if (topic.isRecommended) %}title="{{ 'topic.cancel_good'|trans }}" data-recommend="true" class="cancel-recommend" {% else %}title="{{ 'topic.set_good'|trans }}"{% endif %} data-action="recommend"><i class="if i-good"></i></a></li>
                                    <li><a href="javascript:void(0)" {% if (topic.isTop) %}title="{{ 'topic.cancel_top'|trans }}" data-is-top="true" class="cancel-top" {% else %}title="{{ 'topic.set_top'|trans }}"{% endif %} data-action="stick-top"><i class="if i-stick-top"></i></a></li>
                                {% endif %}

                            </ul>
                            <div class="social-share-container"></div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-u">
                    <div class="panel-heading"><h5>{{ replies|length }} {{ 'ui.reply'|trans }}</h5></div>
                    <ul class="list-group reply-list" id="reply-list">
                        {% include 'PHPDishWebBundle:Topic:_reply_list.html.twig'%}
                    </ul>
                    {% if replies.haveToPaginate %}
                    <div class="panel-footer">
                        {% from 'PHPDishWebBundle:Macros:paginator.html.twig' import paginator %}
                        {{ paginator(replies) }}
                    </div>
                    {% endif %}
                </div>
                <div class="panel panel-u reply-topic" id="reply-topic">
                    <div class="panel-heading"><h4>{{ 'ui.reply'|trans }}</h4></div>
                    <div class="panel-body comment-panel">
                        <div class="notice alert alert-light-blue alert-dismissible fade in" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <ul class="helpblock list-unstyled">
                                <li>{{ 'ui.support_markdown_synax_reference'|trans|raw }}</li>
                                <li>{{ 'ui.support_emoji_emoji_reference'|trans|raw }}</li>
                                <li>{{ 'ui.drag_and_paste_upload_image'|trans|raw }}</li>
                                <li>{{ 'ui.support_at_others'|trans }}</li>
                            </ul>
                        </div>
                        {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
                            {{ form_start(form, {'attr': {'id': 'add-reply-form'}}) }}
                                {{ form_widget(form.original_body, {'attr': {'data-role': 'comment-body', 'class': 'form-control body', 'placeholder': 'ui.write_your_comment'|trans}}) }}
                                <div class="tips"><i class="if i-markdown"></i> {{ 'ui.please_use_markdown_synax_write'|trans }}</div>
                                <div class="actions">
                                    <button type="submit" data-role="submit-form" class="btn u-btn-primary" data-loading="{{ 'ui.replying'|trans }}">{{ 'ui.reply'|trans }}</button>
                                    <span class="preview-action" data-action="preview"><i class="if i-view"></i> {{ 'ui.preview'|trans }}</span>
                                </div>
                            {{ form_end(form) }}
                            <div class="preview-panel markdown-body hidden" data-role="preview-panel">
                                {{ 'ui.preview_zone'|trans }}
                            </div>
                        {% else %}
                            <textarea class="form-control" placeholder="{{ 'ui.please_login_first_and_reply'|trans }}" disabled="disabled"></textarea>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                {% include 'PHPDishWebBundle:User:_user_plate.html.twig' %}
                {{ render(controller('PHPDishForumBundle:Topic:todayHotTopics')) }}
            </div>
            <!-- #sidebar -->
        </div>
    </div>
{% endblock %}